import 'package:flutter/material.dart';
import 'package:flutter_company_app/model/product.dart';
import 'package:flutter_company_app/utils/utils.dart';

import '../product/product_detail_page.dart';

class HomeProductWidget extends StatelessWidget {
  final ProductListModel list;
  const HomeProductWidget(this.list);

  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;
    return Container(
      width: deviceWidth,
      alignment: Alignment.center,
      color: Colors.white,
      padding: EdgeInsets.only(top: 18, bottom: 18),
      child: _build(context, deviceWidth),
    );
  }

  _build(BuildContext context, double deviceWidth) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.only(
            left: 5,
            bottom: 10,
          ),
          child: Text(
            "最新产品",
            style: TextStyle(
              fontSize: 16,
              color: Color.fromRGBO(51, 51, 51, 1),
            ),
          ),
        ),
        // 流式布局
        Wrap(
          spacing: 5,
          runSpacing: 5,
          children: buildItemWidget(deviceWidth, context),
        ),
      ],
    );
  }

// 产品卡片
  buildItemWidget(double deviceWidth, BuildContext context) {
    double itemWidth = deviceWidth * 168.5 / 360;
    double imageWidth = deviceWidth * 110.5 / 360;
    return list.data.map((i) {
      Color bgColor = string2Color('#f8f8f8');
      Color titleColor = string2Color('#db5d41');
      Color subtitleColor = string2Color('#999999');
      return GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ProductDetailPage(item: i),
            ),
          );
        },
        child: Container(
          width: itemWidth,
          margin: EdgeInsets.only(
            bottom: 5,
            left: 2,
          ),
          padding: EdgeInsets.only(top: 10, left: 13, bottom: 7),
          color: bgColor,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                i.name,
                style: TextStyle(
                  color: titleColor,
                  fontSize: 15,
                ),
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
              Text(
                i.desc,
                style: TextStyle(
                  color: subtitleColor,
                  fontSize: 15,
                ),
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
              Container(
                  alignment: Alignment(0, 0),
                  margin: EdgeInsets.only(top: 5),
                  child: Image.network(
                    i.imageUrl,
                    width: imageWidth,
                    height: imageWidth,
                  )),
            ],
          ),
        ),
      );
    }).toList();
  }
}
